import React, { Component } from 'react';
// 导入Link组件
import {Link} from "react-router-dom";
// 导入swiper轮播图
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
//导入css
import "./Home.css"; 
//导入PicText组件
import PicText from "../../components/PicText/PicText"; 
import Store from "../../components/Store/Store";
class Home extends Component {
  constructor(props){
      super(props);
      this.state = {
        stores:[],
        kinds:[] //存储轮播图中的商品类别
      };
  }
  render() {
    return (
      <div className="home">
          <div className="swiper">
              <div className="swiper-container">
                <div className="swiper-wrapper">
                    {
                      this.state.kinds.map((item, index)=>{
                          return (<div className="swiper-slide" key={index}>
                              <div className="kinds">
                                  {item.map((item1, index1)=> <PicText url={'https://fuss10.elemecdn.com'+item1.image_url} text={item1.title} key={index1}/>)}
                              </div>
                          </div>)
                      })
                    }
                </div>
              </div>
              <div className="swiper-pagination"></div>
          </div>
          <div className="stores">
              {this.state.stores.map((item, index)=> <Link to={"/third/"+item.id} key={index}><Store item={item}/></Link>)}
          </div>
      </div>
    );
  }
  componentDidMount(){
    this.$axios([
      {
        url:"/v2/index_entry",
        data:{
          geohash:"41.014324,123.188958"
        }
      },
      {
        url:"/shopping/restaurants?latitude=41.014324&longitude=123.188958"
      }
    ]).then(res=>{
      this.setState({
        stores:res[1],
        kinds:[res[0].slice(0,8), res[0].slice(8)]
      });
      //完成轮播图的初始化
      this.initSwiper(); 
    }).catch(err=>console.log(err));
  }

  //定义函数完成轮播图初始化
  initSwiper(){
    new Swiper ('.swiper-container', {
      autoplay:true,
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      }
    });
  } 
}

export default Home;